import { defineComponent, ref } from "vue";
import { OpenCMD } from "../wailsjs/go/main/App.js";
import { AniText } from "./components/AniText";
import { HModal } from "./components/Modal";

const TieleComp = () => {

  const TITLE_CONTENT = {
    content: "Wails Vue3 Template",
    fontSize: "30px",
    gradientColor: "#00e0b7",
    strokeColor: "#6371eb",
  };

  return (
    <AniText
      content={TITLE_CONTENT.content}
      fontSize={TITLE_CONTENT.fontSize}
      gradientColor={TITLE_CONTENT.gradientColor}
      strokeColor={TITLE_CONTENT.strokeColor}
    ></AniText>
  );
};

const ButtonComp = (context: string, onClick: () => void) => {
  return (
    <button
      class="px-10px pt-2px b-1px b-solid b-transparent flex justify-center items-center rounded-2px bg-blue-500 text-white text-13px hover:bg-blue-600 hover:cursor-pointer"
      onClick={onClick}
    >
     {context || "按钮"}
    </button>
  );
};

const App = defineComponent(
  () => {
    const visiblity = ref(false);

    return () => {
      return (
        <section class="size-full flex flex-col justify-center items-center gap-20px">
          <TieleComp />

          {ButtonComp("按钮", () => (visiblity.value = true))}

          <code class="text-15px font-sans mt-10px text-#808080 font-600 flex flex-col items-center gap-10px">
            程序启动: <span class="text-18px text-#00e0b7">wails dev</span>
            程序编译: <span class="text-18px text-#00e0b7">wails build</span>
          </code>

          <HModal
            width="400px"
            height="300px"
            v-model:visible={visiblity.value}
            onOpen={() => {
              console.log("onOpen");
            }}
            onClose={() => {
              console.log("onClose");
            }}
          >
            <AniText fontSize="20px" content="Hello Welcome Wails Vue3 Template"></AniText>
          </HModal>
        </section>
      );
    };
  },
  { name: "App" },
);

export default App;
